<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>溃疡性结肠炎智能评分系统</title>

    <!-- FOUC根除：主题预加载脚本 - 必须在任何CSS加载之前执行 -->
    <script>
      (function() {
        try {
          // 1. 读取用户保存的主题设置
          var savedTheme = localStorage.getItem('uc-theme');
          var systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

          // 2. 确定应用的主题
          var theme = 'light'; // 默认浅色
          if (savedTheme === 'dark' || (savedTheme === 'auto' && systemPrefersDark)) {
            theme = 'dark';
          }

          // 3. 立即设置HTML类名 - 防止FOUC
          document.documentElement.className = document.documentElement.className.replace(/(^|\s)dark|light(\s|$)/g, '') + ' ' + theme;
          document.documentElement.setAttribute('data-theme', theme);

          // 4. 设置内联CSS变量 - 防止布局跳动
          var cssVars = {
            light: {
              '--uc-bg-primary': '#FFFFFF',
              '--uc-bg-secondary': '#F8F9FA',
              '--uc-bg-tertiary': '#E9ECEF',
              '--uc-text-primary': '#1D1D1F',
              '--uc-text-secondary': '#48484A',
              '--uc-text-tertiary': '#8E8E93',
              '--uc-border-primary': '#D1D5DB',
              '--uc-border-secondary': '#E5E7EB',
              '--uc-accent-primary': '#007AFF',
              '--uc-accent-secondary': '#5856D6'
            },
            dark: {
              '--uc-bg-primary': '#1C1C1E',
              '--uc-bg-secondary': '#2C2C2E',
              '--uc-bg-tertiary': '#3A3A3C',
              '--uc-text-primary': '#F2F2F7',
              '--uc-text-secondary': '#A1A1AA',
              '--uc-text-tertiary': '#6B7280',
              '--uc-border-primary': '#38383A',
              '--uc-border-secondary': '#48484A',
              '--uc-accent-primary': '#0A84FF',
              '--uc-accent-secondary': '#5E5CE6'
            }
          };

          // 5. 应用CSS变量
          var vars = cssVars[theme];
          for (var key in vars) {
            document.documentElement.style.setProperty(key, vars[key]);
          }

          // 6. 设置背景色 - 最关键的FOUC防护
          document.documentElement.style.backgroundColor = vars['--uc-bg-primary'];
          document.documentElement.style.color = vars['--uc-text-primary'];

        } catch (e) {
          // 如果出错，默认使用浅色主题
          document.documentElement.className = 'light';
          document.documentElement.setAttribute('data-theme', 'light');
        }
      })();
    </script>

    <!-- 字体预加载 - 防止字体加载抖动 -->
    <link rel="preload" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"></noscript>

    <!-- 内联字体栈CSS - 确保字体回退时字宽一致 -->
    <style>
      /* 字体降级策略 - 防止FOUT */
      body {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
      }

      /* 防止字体加载时的布局跳动 */
      .tabular-nums,
      .score-display,
      .confidence-percentage,
      .medical-value {
        font-variant-numeric: tabular-nums;
        font-feature-settings: 'tnum';
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Mono', 'Monaco', 'Inconsolata', monospace;
      }

      /* 临时FOUC防护 - 在Vue应用加载前显示基础样式 */
      #app {
        opacity: 0;
        transition: opacity 0.1s ease;
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--uc-bg-primary, #FFFFFF);
        color: var(--uc-text-primary, #1D1D1F);
      }

      .app-ready #app {
        opacity: 1;
      }

      /* Vue应用超时检测 - 10秒后强制显示 */
      @keyframes vue-timeout-warning {
        0%, 90% { opacity: 0; }
        100% { opacity: 1; }
      }

      #app.vue-timeout {
        animation: vue-timeout-warning 10s forwards;
        padding: 20px;
        text-align: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      }

      /* 暗黑模式基础样式 - 确保CSS变量加载前的基础显示 */
      html.dark {
        background-color: #1C1C1E;
        color: #F2F2F7;
      }

      html.light {
        background-color: #FFFFFF;
        color: #1D1D1F;
      }
    </style>

    <!-- 浏览器扩展错误屏蔽脚本 -->
    <script>
      (function() {
        'use strict';
        
        // 保存原始的console方法
        const originalConsole = {
          error: console.error,
          warn: console.warn,
          log: console.log
        };

        // 需要屏蔽的错误模式
        const suppressPatterns = [
          'ODHFrontend',
          'chrome-extension://lppjdajkacanlmpbbcdkccjkdbpllajb',
          'api_setFrontendOptions',
          'Cannot read properties of null (reading \'enabled\')',
          'chrome-extension://',
          'Error in event handler',
          'at ODHFrontend.',
          'at ODHFrontend.onMessage'
        ];

        // 判断是否应该屏蔽错误
        function shouldSuppress(message) {
          if (!message || typeof message !== 'string') return false;
          return suppressPatterns.some(pattern => message.includes(pattern));
        }

        // 重写console.error
        console.error = function(...args) {
          const message = args.join(' ');
          if (shouldSuppress(message)) {
            return; // 静默屏蔽扩展错误
          }
          originalConsole.error.apply(console, args);
        };

        // 重写console.warn（可选）
        console.warn = function(...args) {
          const message = args.join(' ');
          if (shouldSuppress(message)) {
            return; // 静默屏蔽扩展警告
          }
          originalConsole.warn.apply(console, args);
        };

        // 全局错误事件处理
        window.addEventListener('error', function(event) {
          if (shouldSuppress(event.message)) {
            event.preventDefault();
            event.stopPropagation();
            return false;
          }
        });

        // Promise拒绝处理
        window.addEventListener('unhandledrejection', function(event) {
          const message = event.reason?.message || event.reason;
          if (shouldSuppress(message)) {
            event.preventDefault();
            return false;
          }
        });

        // 清理现有的扩展错误日志
        setTimeout(function() {
          console.log('%c🛡️ 浏览器扩展错误屏蔽已启用', 'color: #4CAF50; font-weight: bold;');
        }, 1000);

      })();
    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>

    <!-- Vue应用超时检测脚本 -->
    <script>
      // Vue应用加载超时检测
      (function() {
        let timeoutId;
        let checkCount = 0;
        const maxChecks = 20; // 最多检查10秒
        const checkInterval = 500; // 每500ms检查一次

        function checkVueMount() {
          checkCount++;

          // 检查Vue是否已经挂载
          const isVueMounted = document.documentElement.hasAttribute('data-vue-mounted');
          const hasError = document.documentElement.hasAttribute('data-vue-error');
          const isAppReady = document.documentElement.classList.contains('app-ready');

          console.log(`🔍 Vue挂载检查 ${checkCount}/${maxChecks}:`, {
            mounted: isVueMounted,
            error: hasError,
            ready: isAppReady
          });

          if (isVueMounted) {
            console.log('✅ Vue应用已成功挂载!');
            clearTimeout(timeoutId);
            return;
          }

          if (hasError) {
            console.log('❌ Vue应用发生错误');
            clearTimeout(timeoutId);
            return;
          }

          if (checkCount >= maxChecks) {
            console.warn('⚠️ Vue应用加载超时，显示加载提示');
            const appElement = document.getElementById('app');
            if (appElement && !appElement.innerHTML.trim()) {
              appElement.classList.add('vue-timeout');
              appElement.innerHTML = `
                <div class="vue-timeout">
                  <h2>⏳ 应用加载中...</h2>
                  <p>Vue应用正在启动，请稍候</p>
                  <p>如果长时间无响应，请刷新页面或检查浏览器控制台</p>
                  <p><small>加载时间: ${Math.floor(checkCount * checkInterval / 1000)}秒</small></p>
                </div>
              `;
            }
            clearTimeout(timeoutId);
          }
        }

        // 开始检查
        timeoutId = setInterval(checkVueMount, checkInterval);

        // 10秒后强制显示内容
        setTimeout(function() {
          const appElement = document.getElementById('app');
          if (appElement && !appElement.innerHTML.trim()) {
            appElement.style.opacity = '1';
            console.warn('⚠️ 强制显示应用内容');
          }
        }, 10000);

      })();
    </script>
  </body>
</html>